<style>
</style>

<template>

  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
        <Button
          class="float-r"
          type="primary"
          size="large"
          icon="ios-search"
          @click="doSearchTableList"
        >搜 索</Button>
        <Button
          class="float-r"
          size="large"
          icon="md-add"
          @click="addItem"
          v-perms="'sys:dept:save'"
          style="margin-right:10px;"
        >添加</Button>

        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <tree-table
        expand-key="name"
        :expand-type="false"
        :selectable="false"
        :columns="treeTableColumns"
        :data="treeTableData"
      >
        <template
          slot="handles"
          slot-scope="scope"
        >
          <Button
            type="warning"
            style="margin-right:10px;"
            @click="editItem(scope)"
            v-perms="'sys:dept:update'"
          >修改</Button>
          <Button
            type="error"
            @click="delItem(scope)"
            v-perms="'sys:dept:delete'"
          >删除</Button>
        </template>
      </tree-table>
    </Row>
    <!--新增编辑-->
    <deptForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></deptForm>
    <!--是否删除框-->
    <Modal
      v-model="delModal"
      width="360"
    >
      <p
        slot="header"
        style="color:#f60;text-align:center"
      >
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button
          type="error"
          size="large"
          long
          :loading="btnLoading"
          @click="comfirmDel"
        >删除</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { getDeptList, delDept } from "@/api/system";
import deptForm from "./deptForm.vue";
export default {
  name: "dept",
  components: {
    deptForm
  },
  data() {
    return {
      treeTableColumns: [
        {
          title: "部门名",
          key: "name",
          width: "400px"
        },
        {
          title: "上级部门名",
          key: "parentName",
          minWidth: "50px"
        },
        {
          title: "操作",
          key: "handles",
          minWidth: "200px",
          type: "template",
          template: "handles",
          headerAlign: "center",
          align: "center"
        }
      ],
      treeTableData: [],
      formShow: false,
      formTitle: "添加部门",
      parentForm: {
        deptId: "",
        name: "",
        orderNum: "",
        parentId: "",
        parentName: "",
        cascader: ""
      },
        resetForm: {
        deptId: "",
        name: "",
        orderNum: "",
        parentId: "",
        parentName: "",
        cascader: ""
      },
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    doSearchTableList() {
      this.getTableList();
    },
    async getTableList() {
      const result = await getDeptList();
      if (result.code == 0) {
        this.treeTableData = result.data;
      }
    },
    addItem() {
      this.parentForm = JSON.parse(JSON.stringify(this.resetForm))
      this.formTitle = "添加部门";
      this.formShow = true;
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row.row));
      this.formTitle = "修改部门";
      this.formShow = true;
    },
    delItem(row) {
      this.delId = row.row.deptId;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await delDept(this.delId);
        if (res.code == 0) {
          this.getTableList();
          this.delModal = false;
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
    handle(scope) {
      console.log(scope);
    }
  }
};
</script>
